<template>
	<view class="my-content">
		<u-card :show-head="false" margin="0">
			<view slot="body">
				<u-form label-position="top">
					<u-form-item :label="$t('名单名称')" :label-style="labelStyle">
						<u-input height="40" v-model="name" :placeholder="$t('请输入')" :custom-style="myStyle1" />
						<template v-slot:right>
							<u-icon name="edit-pen"></u-icon>
						</template>
					</u-form-item>
				</u-form>
				<view class="u-flex u-row-between u-margin-top-20 u-col-bottom">
					<view>{{$t("收录企业数量")}}</view>
					<view class="bigNum">200</view>
				</view>
			</view>
		</u-card>
		<u-gap height="20"></u-gap>
		<!-- 建议把请求数据移出来 -->
		<FavoriteList :checkAll="checkAll" :isCheckStatus="true" @change="change"></FavoriteList>

		<view class="footer">
			<view>
				<u-checkbox v-model="checkAll" active-color="#ff7348" shape="circle">
					<view class="u-margin-left-10">
						<view>{{$t("全选")}}</view>
						<view>{{checkData.length}}/{{data.length}}</view>
					</view>
				</u-checkbox>
			</view>
			<view class="btns u-flex">
				<u-button type="primary" :custom-style="customStyle1" hover-class="none" @click="cancel"
					class="u-margin-right-20">
					{{$t("取消")}}
				</u-button>
				<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="deleteFun">
					{{$t("批量删除")}}
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import FavoriteList from '../components/FavoriteList.vue'
	export default {
		components: {
			FavoriteList
		},
		onLoad({
			id
		}) {
			this.id = id
		},
		data() {
			return {
				checkAll: false,
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '10rpx',
					'min-width': '180rpx',
					'max-width': '180rpx'
				},
				customStyle1: {
					background: 'transparent',
					'border-radius': '10rpx',
					'min-width': '180rpx',
					'max-width': '180rpx',
					color: '#ff4a17',
					'border': '1px solid #ff4a17'
				},
				myStyle1: {
					fontSize: '26rpx'
				},
				labelStyle: {
					"font-weight": 'normal'
				},
				id: null,
				name: '',
				data: []
			};
		},
		computed: {
			checkData() {
				return this.data.filter(item => item.checked)
			}
		},
		methods: {
			change(data) {
				this.data = data;
			},
			cancel() {
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
			deleteFun() {
				if (this.checkData.length === 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t("请选择数据"),
					})
					return;
				}
				const _this = this;
				uni.showModal({
					title: this.$t("温馨提示"),
					content: this.$t("确认删除么"),
					success(res) {
						if (res.confirm) {
							_this.doDelete();
						}
					}
				});
			},
			doDelete(){
				console.log(this.checkData,this.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 30rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
		}

		.bigNum {
			color: #ff7348;
			font-size: 50rpx;
			font-weight: 800;
		}
	}
</style>